@import url(../../assets/css/normalize.css);
@import url(../../assets/css/common.css);
.head {
  width: 100%;
  align-items: center;
  padding: 0 20px;
  height: 66px;
  border-bottom: 1px solid skyblue;
  position: absolute;
  box-sizing: border-box;
  z-index: 10;
}
nav a {
  margin: 0 20px;
  font-size: 16px;
  color: white;
}
.active {
  font-size: 18px;
  padding-bottom: 19px;
  border-bottom: 3px solid skyblue;
}
.nav-btn a {
  font-size: 16px;
  color: white;
}
.nav-login {
  line-height: 30px;
  height: 30px;
  padding: 0 20px;
  background-color: transparent;
  margin-right: 10px;
  border-radius: 15px;
  border: #ccc 1px solid;
}
.nav-zc {
  line-height: 30px;
  height: 30px;
  padding: 0 20px;
  background-color: #ef5208;
  margin-right: 10px;
  border-radius: 15px;
}
.swiper-slide img {
  width: 100%;
  height: 680px;
  object-fit: cover;
}
.about-us {
  height: 420px;
}
.about {
  align-items: center;
  margin-top: 50px;
}
.about h2 {
  font-size: 40px;
  font-weight: normal;
}
.about p {
  margin-top: 10px;
}
.about a {
  font-size: 12px;
  margin-top: 10px;
  color: #1271ef;
}
.service li {
  box-shadow: 2px 4px 10px 0 rgba(18, 113, 239, 0.6);
  background-color: white;
  margin: 30px 15px;
}
.service li h4 {
  font-size: 22px;
  padding-left: 20px;
  padding-top: 10px;
  font-weight: normal;
}
.service li p {
  padding: 10px 0px 20px 20px;
}
.service li a {
  display: block;
  padding-left: 20px;
  color: #1271ef;
  padding-bottom: 10px;
  font-size: 12px;
}
.intrdoce {
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 680px;
  background: url("../../assets/imgs/more-api-bg.svg") no-repeat center #f8f9fb;
}
.intrdoce .about {
  height: 120px;
  padding-top: 10px;
}
.intrdoce {
  margin-top: 80px;
}
.intrdoce .api {
  width: 1200px;
  height: 300px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 50px;
}
.intrdoce .api .api-ul {
  flex-wrap: wrap;
  justify-content: space-around;
}
.intrdoce .api li {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  margin-bottom: 30px;
  box-shadow: 2px 4px 10px 0 rgba(18, 113, 239, 0.6);
}
.intrdoce .api li img {
  width: 36px;
  height: 36px;
}
.intrdoce .api li p {
  margin-top: 10px;
}
.api-a {
  color: #1271ef;
}
.master {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.master .master-img {
  margin-right: 50px;
}
.master .master-p div {
  color: #333;
  box-sizing: border-box;
  height: 90px;
  width: 500px;
  margin-bottom: 20px;
  background-color: #FBFBFD;
  padding-top: 14px;
  padding-left: 10px;
  position: relative;
}
.master .master-p div h5 {
  font-size: 18px;
  padding-bottom: 10px;
}
.master .master-p div .master-blue {
  display: block;
  width: 4px;
  height: 28px;
  background-color: #1271ef;
  position: absolute;
  left: 0;
  top: 30px;
}
.master-icon {
  margin-right: 10px;
  padding-bottom: 3px;
}
.ma-banner {
  height: 270px;
  margin-top: 40px;
  position: relative;
}
.ma-banner .height {
  opacity: 0;
  transition: all 2s;
  position: absolute;
}
.ma-banner .jh {
  opacity: 1;
  height: 270px;
}
.ma-banner .mange {
  float: left;
}
.ma-banner .ma-img {
  width: 580px;
  height: 290px;
  margin-right: 40px;
}
.ma-banner .mange-left p {
  margin-top: 40px;
}
.secure {
  margin-top: 40px;
  justify-content: space-around;
}
.secure .secure-li {
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
}
.secure .secure-li .secure-bg1 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item01.svg') no-repeat center / cover;
}
.secure .secure-li .secure-bg2 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item02.svg') no-repeat center / cover;
}
.secure .secure-li .secure-bg3 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item03.png') no-repeat center;
}
.secure .secure-li .secure-bg4 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item04.png') no-repeat center;
}
.secure .secure-li .secure-bg5 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item05.png') no-repeat center;
}
.secure .secure-li .secure-bg6 {
  width: 160px;
  height: 90px;
  background: url('../../assets/imgs/security-logo-item06.png') no-repeat center / cover;
}
.secure .secure-li p {
  margin-top: 10px;
}
.free {
  margin-top: 40px;
  color: #f8f9fb;
  align-items: center;
  height: 240px;
  background: url('../../assets/imgs/login-register-bg.svg') no-repeat #1271ef;
}
.free .div-free {
  align-items: center;
  flex-direction: column;
}
.free .div-free h6 {
  font-size: 32px;
}
.free .div-free a {
  box-sizing: border-box;
  text-align: center;
  width: 120px;
  height: 40px;
  color: #f8f9fb;
  border: 1px solid #f8f9fb;
  padding: 8px 0;
  margin-top: 20px;
}
footer {
  margin-top: 40px;
}
.foot-div {
  justify-content: space-between;
  flex-wrap: wrap;
}
.foot-div .foot-left {
  width: 800px;
  height: 180px;
}
.foot-div .foot-left .foot-li {
  width: 160px;
  height: 168px;
}
.foot-div .foot-left .foot-li h6 {
  margin-bottom: 20px;
  font-size: 14px;
  color: #181818;
}
.foot-div .foot-left .foot-li a {
  font-size: 12px;
  display: block;
  margin-top: 10px;
  color: #b3b3b3;
}
.foot-div p {
  flex-direction: column;
}
.foot-p {
  margin-top: 60px;
  color: #d1d1d1;
  font-size: 14px;
}
.right {
  width: 400px;
  flex-direction: column;
  align-items: end;
}
.right h3 {
  color: #181818;
}
.right p {
  margin-top: 10px;
  color: #c0c0c0;
}
.right img {
  margin-top: 30px;
}
.foot-pp {
  margin-top: 60px;
  color: #d1d1d1;
}
.scolltop {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  right: 20px;
  bottom: 20px;
  background: url(../../assets/imgs/returntopicon.jpg) no-repeat center;
  background-position: -163px -56px;
}
.scolltop:hover {
  background-position: -163px -98px;
}
